<!-- /src/components/BucketContents/ObjectActionBar.vue (使用按钮组切换版本视图) -->
<template>
    <div class="action-bar">
        <div class="action-bar-left">
            <!-- 上传、新建、刷新按钮 (保持不变) -->
            <el-dropdown split-button type="primary" @click="goToUploadPage">
                <el-icon>
                    <Upload />
                </el-icon>
                <span>上传文件</span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="goToUrlUploadPage">
                            <el-icon>
                                <Link />
                            </el-icon>
                            <span>从URL上传</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-button @click="$emit('createFolder')">
                <el-icon>
                    <FolderAdd />
                </el-icon>
                <span>新建目录</span>
            </el-button>

            <!-- ==================== 【新增】更多操作下拉菜单 ==================== -->
            <el-dropdown @command="handleMoreCommand">
                <el-button>
                    更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="openFragmentManagement">
                            <el-icon>
                                <Delete />
                            </el-icon>
                            <span>碎片管理</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="action-bar-right">
            <el-button :icon="Refresh" @click="$emit('refresh')" circle title="刷新" />
            <!-- 【核心修改】将版本切换按钮移到右侧，和阿里云布局一致 -->
            <template v-if="isVersioningEnabled">
                <el-button-group class="version-toggle-group">
                    <el-button :type="!showVersions ? 'primary' : ''" @click="$emit('toggle-versions', false)">
                        隐藏历史版本
                    </el-button>
                    <el-button :type="showVersions ? 'primary' : ''" @click="$emit('toggle-versions', true)">
                        显示历史版本
                    </el-button>
                </el-button-group>
                <el-divider direction="vertical" />
            </template>

            <!-- 搜索框 (保持不变) -->
            <el-input v-model="internalSearchPrefix" placeholder="请输入文件名前缀" class="input-with-select"
                @keyup.enter="handleSearch" clearable @clear="handleSearch">
                <template #append>
                    <el-button :icon="Search" @click="handleSearch" />
                </template>
            </el-input>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
// 【修改】移除 Warning 图标，因为它不再需要了
import {
    Upload,
    FolderAdd,
    Link,
    Refresh,
    Search,
    ArrowDown,
    Delete
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

// Props 定义保持不变，完全正确
const props = defineProps({
    bucketName: { type: String, required: true },
    currentPath: { type: String, default: '' },
    searchPrefix: { type: String, default: '' },
    showVersions: { type: Boolean, default: false },
    isVersioningEnabled: { type: Boolean, default: false }
});

// Emits 定义也保持不变，完全正确
const emit = defineEmits([
    'create-folder',
    'refresh',
    'search',
    'toggle-versions',
    'openFragmentManagement',
]);

const router = useRouter();
const goToUploadPage = () => {
    // 这段逻辑就是从您之前模板中的 <router-link> 移过来的
    router.push({
        name: 'ObjectUpload',
        params: {
            bucketName: props.bucketName,
            path: props.currentPath.split('/').filter(p => p)
        }
    });
};

// 内部搜索词逻辑 (保持不变)
const internalSearchPrefix = ref(props.searchPrefix);
watch(() => props.searchPrefix, (newValue) => {
    internalSearchPrefix.value = newValue;
});
const handleSearch = () => {
    emit('search', internalSearchPrefix.value);
};

const handleMoreCommand = (command) => {
    if (command === 'openFragmentManagement') {
        // 当命令是 'openFragmentManagement' 时，向父组件发送事件
        emit('openFragmentManagement');
    }
    // 未来可以在这里为更多命令添加 else if 分支
};

const goToUrlUploadPage = () => {
    if (!props.bucketName) return;

    // 将 currentPath (字符串) 转换为 vue-router 需要的数组格式
    // 这个逻辑和 goToUploadPage 函数中的完全一致
    const pathParams = props.currentPath ? props.currentPath.replace(/\/$/, '').split('/') : [];

    router.push({
        name: 'UrlUpload', // <-- 确保这个名字和你在 router/index.js 中定义的一致
        params: {
            bucketName: props.bucketName,
            path: pathParams,
        },
    });
};
</script>

<style scoped>
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    /* 确保操作栏撑满容器 */
}

.action-bar-left,
.action-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.el-button .el-icon+span {
    margin-left: 5px;
    /* 微调图标和文字间距 */
}

/* 【修正】将按钮组和分割线放在一个flex容器里，防止它们之间换行 */
.action-bar-right {
    flex-shrink: 0;
    /* 防止右侧被压缩 */
}

/* 按钮组样式 */
.version-toggle-group {
    margin: 0;
}

/* 搜索框宽度微调，给按钮组留出空间 */
.action-bar-right .el-input {
    width: 250px;
}

/* 分割线样式 */
.el-divider--vertical {
    height: 24px;
    margin: 0;
}
</style>